<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="../EXT4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
	href="../css/style.css" />
<script type="text/javascript" src="../EXT4/ext-all.js"></script>
<script type="text/javascript" src="../script/ext-lang-zh_CN.js"></script>
<script type="text/javascript">

Ext.onReady(function() {
	
	Ext.QuickTips.init();
	
	var itemsPerPage = 20; 
    //定义model 
    Ext.define('Class', { 
        extend: 'Ext.data.Model', 
        // fields定义字段和数据类型 
        fields: ['id', 'className', 'bishopName','subject','classroom','assistantName','count','age'] 
    });
    
    //定义数据集 
    var store = Ext.create('Ext.data.Store', {
        model: 'Class', 
        autoLoad: true,
        pageSize: itemsPerPage,
        //使用ajax代理 
        proxy: { 
            type: 'ajax', 
            url: '../service/class1_all',
            //Reader 解码json数据 
            reader: { 
                type: 'json', 
                root: 'root', 
                total: 'total'
            }
        }
    });
    
    var panel=Ext.create('Ext.Panel', {
        id:'main-panel',
        baseCls:'x-plain',
        renderTo:'classlist',
        items:[{
            xtype:'fieldset',
            title: '查询条件',
            collapsible: true,
            defaultType: 'textfield',
            layout: 'hbox',
            items :[{
                fieldLabel: '班级名称:',
                id:'cname',
                labelWidth:60,
                width:200,
                margin:'0 10 0 0',
            }]
        },Ext.create('Ext.grid.Panel', {
        	store: store,
            columns: [ 
            { 
                text: '班级名称', width: 100, sortable: true, dataIndex: 'className', editor: 'textfield'
            }, 
            { 
                text: '主教', width: 120, dataIndex: 'bishopName', editor: 'textfield' 
            }, 
            { 
                text: '助教', width: 120, dataIndex: 'assistantName', editor: 'textfield' 
            }, 
            { 
                text: '课程', width: 120, dataIndex: 'subject', editor: 'textfield' 
            }, 
            { 
                text: '教室', width: 120, dataIndex: 'classroom', editor: 'textfield' 
            }, 
            { 
                text: '人数限制', width: 120, dataIndex: 'count', editor: 'textfield' 
            }, 
            { 
                text: '年龄限制', width: 120, dataIndex: 'age', editor: 'textfield',
                renderer : function(value, metaData, record, rowIndex, colIndex, store)
				{
					if(value == 1) {
						return "L1";
					}
					if(value == 2) {
						return "L2";
					}
					if(value == 3) {
						return "L3";
					}
				}
            },{ 
            	text: '操作',
                xtype: 'actioncolumn',
                width: 100,
                items: [{
                	 icon   : '../EXT4/fam/add.png"',  // Use a URL in the icon config
                     tooltip: '添加成员',
                     handler: function(grid, rowIndex, colIndex) {
                     	var rec = grid.getStore().getAt(rowIndex);
                    	 Ext.create('Ext.Window', {
                	    	width:640,
                	    	height:400,
                	    	resizable :false,
                	    	draggable : false,
                	    	modal:true,
                	    	title:'添加成员',
                	    	loader: {
                	        	url: 'membermng',
                	        	loadMask: 'loading...',
                	        	autoLoad: true,
                	        	scripts: true,
                	        	method : 'GET',
                	        	params:{
                	        	id:rec.get('id')
                	        	}
                	        },
                	    }).show();
                     }
                },{
                	 icon   : '../EXT4/fam/cog_edit.png"',  // Use a URL in the icon config
                     tooltip: '修改',
                     handler: function(grid, rowIndex, colIndex) {
                    	 var rec = grid.getStore().getAt(rowIndex);
                    	 Ext.create('Ext.Window', {
                    		id:'updatewin',
                	    	width:510,
                	    	height:450,
                	    	resizable :false,
                	    	draggable : false,
                	    	modal:true,
                	    	title:'修改班级信息',
                	    	loader: {
                	        	url: 'updateclass',
                	        	loadMask: 'loading...',
                	        	autoLoad: true,
                	        	scripts: true,
                	        	method : 'GET',
                	        	params:{
                	        		id:rec.get('id')
                	        	}
                	        },
            	        	listeners:{
                	        	'close':function(){
                	        		store.reload();
                	        	}
                	        }
                	    }).show(); 
                     }
                },
                {
                    icon   : '../EXT4/fam/cross.gif"',  // Use a URL in the icon config
                    tooltip: '删除',
                    handler: function(grid, rowIndex, colIndex) {
                    	var rec = grid.getStore().getAt(rowIndex);
                    	Ext.MessageBox.confirm("确认","确认删除班级:"+rec.get('className'),function(btn){
                    		if(btn=='yes'){
                    			Ext.Ajax.request({  
                    		        url : '../service/class1_delete',  
                    		        method : 'GET',
                    		        params:{
                	        			id:rec.get('id')
                	       			},  
                    		        success:function(){
                    		        	store.reload();
                    		        }
                    		});
                        } 
                    });
                    }
                }]
            }],
            tbar : [{  
                xtype : 'button',  
                text : '查询',
                handler: function() {
                	var classname = escape(Ext.getCmp('cname').getValue());
    				store.loadPage(1,{ params:{'classname':classname} });
                }
            }],
            //分页 
            dockedItems: [{ 
                xtype: 'pagingtoolbar', 
                store: store,
                dock: 'bottom', 
                displayInfo: true 
                }]
        })]
    });
    
    window.onresize = function(){
    	setTimeout(function(){panel.setWidth(Ext.getDom("classlist").width);},100);
	};
	
});
</script>
</head>
<body>
<div id="classlist"></div>
</body>
</html>